import React, { Component } from 'react'
import './App.css'
export default class  extends Component {
  state={
    todoList:['吃饭','睡觉','打亮亮'],
    list:''
   }
   delList=(i)=>{
      console.log(i);
      this.state.todoList.splice(i,1)
      let todoList=this.state.todoList
      this.setState({todoList})
   }
   addList=(e)=>{
    console.log(e);
    let list=e.target.value.trim()
    // this.state.list.push(list)
    this.setState({list})
   }
   doSave=()=>{
    if(this.state.list.trim()===''){
      alert('不能为空')
    }
    console.log(this.state.list);
    this.state.todoList.push(this.state.list)
    let todoList=this.state.todoList
    this.setState({todoList,list:""})
   }
  render() { 
    return (
      <div>
        <h2>待办事项列表</h2>
        
        <hr/>
        <input value={this.state.list} placeholder='请输入新的的待办事项' onChange={this.addList}/>
        <button onClick={this.doSave}>添加</button>
        {/* <p>您目前暂无待办事项</p> */}
        {
          this.state.todoList.length===0 && <p>您目前暂无待办事项</p>
        }
        <ol className='list'>
         {this.state.todoList.map((item,i)=>(
          <li key={i}>
            <span>{i+1}-{item}</span>
            <button onClick={()=>this.delList(i)}>删除</button>
          </li>)
          )}         
        </ol>
        
      </div>
    )
  }
}
